<template>
    <div class="comment">
        <!-- 添加或修改topic对话框 -->
        <el-dialog  :visible.sync="open" width="700px"  append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-form-item label="帖子内容" >
                    <!--                        <editor v-model="form.content" :min-height="192"/>-->
                    <el-input v-model="form.content" placeholder="请输入帖子内容" />
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
                <p class="head">
            <el-tag type="info" >{{ comment.topic.userName}}  </el-tag>
            <el-link type="info" style="font-size: 10px; '">{{comment.topic.time }}</el-link>
            <span
                    style="float: right"
                    v-if="comment.child && comment.child.length"
                    @click="updateStatus()"
            >
                {{anniu}}
            </span>
        </p>
        <p>{{ comment.topic.content }}
            <el-button
                    style='position: absolute;right:60px;'
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleUpdate(comment.topic.id)"
            ></el-button>
            <el-button
                    style='position: absolute;right:30px;'
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDelete(comment.topic.id)"
            ></el-button>
        </p>
        <CommentList
            v-show="showCommentDetail"
            v-if="comment.child && comment.child.length"
            :comments="comment.child"
        />

    </div>
</template>

<script>

const CommentList = () => import("./CommentList.vue"); //异步加载组件引入解决循环引用问题

export default {
    name: "CommentItem",
    components: {
        CommentList,
    },
    data() {
        return {
            showCommentDetail: false,
            anniu: '[+]',
            // 是否显示修改弹出层
            open: false,
            // 表单参数
            form: {},
            // 表单校验
            rules: {
            }
        };
    },
    props: {
        comment: {
            type: Object,
            default: () => {},
        },
    },
    methods: {
        updateStatus(){
            this.showCommentDetail = !this.showCommentDetail;
            if(this.showCommentDetail){
                this.anniu="[-]";
            }else{
                this.anniu="[+]";
            }
        },
        // 表单重置
        reset() {
            this.form = {
                content: null,
            };
            // this.$refs['form'].resetFields();
            // this.resetForm("form");
        },
        /** 修改按钮操作 */
        handleUpdate(id) {
            this.reset();
            const token = sessionStorage.getItem("token");
            this.$http.defaults.headers.common['Authorization'] = token;
            this.$http.get('topic/'+ id).then(response => {
                console.log(response.data.data.data);
                this.form = response.data.data.data.topic;
                this.open = true;
                this.title = "修改帖子";
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id != null) {
                        const token = sessionStorage.getItem("token");
                        this.$http.defaults.headers.common['Authorization'] = token;
                        this.$http.put('topic',this.form).then(response => {
                            if (response.data.code === 200) {
                                this.$message({showClose: true, message: "修改成功", type: "success"})
                                this.open = false;
                                this.getList();
                            }
                        });
                    } else {
                        const token = sessionStorage.getItem("token");
                        this.$http.defaults.headers.common['Authorization'] = token;
                        this.$http.post('topic',this.form).then(response => {
                            if (response.data.code === 200) {
                                this.$message({ showClose: true, message: "新增成功", type: "success" })
                                this.open = false;
                                this.getList();
                            }
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(id) {
            this.$confirm('是否确认删除topic编号为"' + id + '"的数据项?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(async () => {
                this.$http.delete(`topic/`+id).then(response => {
                    if (response.data.code == 200) {
                        this.$message({
                            showClose: true,
                            message: '删除成功',
                            type: 'success'
                        });
                        this.getList();
                    } else {
                        this.$message({
                            showClose: true,
                            message: response.data.msg,
                            type: response.data.code
                        });
                    }
                });
            }).catch(() => {

            });
        },
    },
    mounted() {},
};
</script>

 Add "scoped" attribute to limit CSS to this component only
<style scoped lang="scss">
.comment {
    margin: 20px;
}
.head {
    color: #aca9a9;
    span {
        cursor: pointer;
    }
}
</style>
